<template>
    <div class="app">
       <!-- navbar组件 -->
       <van-nav-bar
        title="修改地址"
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- 地址填写栏 -->
      <van-address-edit
          :area-list="areaList"
          show-postal
          show-delete
          save-button-text="确认修改"
          :address-info="AddressInfo"
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
          />
    </div>
  </template>
  
  <script>
  import { mapActions,mapState } from 'vuex';
  import {areaList} from '@vant/area-data'
  import { Toast } from 'vant';
  export default {
      data() {
      return {
        areaList,
        searchResult: [],
        AddressInfo:{}
      }
      },
      mounted(){
        let index=this.address_info.find((element)=>{
          return element.name==this.$route.query.name
        })
        // let info={id:index.id, name:index.name,tel:index.phone}
        // console.log(info)
        this.AddressInfo=index
      },
      computed:{
        ...mapState(['addresslist','address_info'])
      },
      methods:{
        ...mapActions(['request_address_edit','request_address_del']),
          onClickLeft(){
              this.$router.go(-1)
          },
          onSave(content) {
              Toast('已修改');   
              content.id=this.$route.query.id 
              console.log(content)       
              this.request_address_edit(content);
          },
          onDelete(content) {
              Toast('已删除');
             let addressid= this.$route.query.id
            this.request_address_del(addressid);
          },
          onChangeDetail(val) {
              if (val) {
              this.searchResult = [
            {
              name: '黄龙万科中心',
              address: '杭州市西湖区',
            },
              ];
          } else {
          this.searchResult = [];
          }}
      }
  }
  </script>
  
  <style>
  
  </style>